<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>div方框上下左右键移动</title>
        <script src="js/vue.global.js"></script>
    </head>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
           transition: .3s;
        }
    </style>
    <body>
        <div id="app">
            <div class="box" :style="{
                transform:'translate('+x+'px,'+y+'px) scale('+s+')'
            }"></div>
        </div>
        <script>
            var a=1
            "这是一段"+a+"字符串"
            Vue.createApp({
                data() {
                    return {
                        x:0,
                        y:0,
                        s:1
                    }
                },
                mounted() { //整个文档添加键盘事件
                    document.addEventListener('keydown',this.move)
                    },
                    methods:{
                        move(event){
                            let code=event.keyCode  //键码
                            //alert(code)
                            if(code==37){ //37是左键
                              if(this.x>0)this.x-=10
                            }
                            if(code==38){ //38是上键
                              if(this.y>0)this.y-=10
                            }
                            if(code==39){ //39是右键
                              this.x+=10
                            }
                            if(code==40){ //40是下键
                              this.y+=10
                            }
                            //+ -
                            if(code==187){
                                this.s+=0.1 //放大
                            }
                            if(code==189){
                                this.s-=0.1 //缩小
                            }
                        }
                    }
                }
            ).mount('#app')
        </script>
    </body>
</html>